<template>
  <div style="background:#f3f3f3">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="options">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">添加维护记录</h1>
      <div class="mint-header-button is-right" />
    </header>
    <!-- <div style="height:40px"></div> -->
    <mt-field v-model="carid" label="选择设备:">
      <span style="color:#000;" @click="addcarid">{{ chouseval }}</span>
    </mt-field>
    <picker2 :pictitle="'维护时间:'" :gettime.sync="grantime" />
    <mt-field v-model="adrword" label="维护内容:" is-link />
    <!-- <uploadpic></uploadpic> -->
    <mt-button type="primary" style="width:100%;margin-top:20px" @click="gonuxt">确 定</mt-button>
    <div class="datePicker">
      <mt-datetime-picker ref="picker" :visible-item-count="5" type="datetime" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm" />
    </div>
    <mt-popup v-model="showamap" position="left" class="mapcontent">
      <qqmap v-if="isRouterAlive" @getmapdata="getmapdata" @changeshow="changeshow" />
    </mt-popup>
    <mt-popup v-model="popupVisible22" position="bottom" class="mint-popup" style="width:100%">
      <mt-picker :slots="dataList" :visible-item-count="5" :show-toolbar="true" value-key="showname" @change="onDateChange">
        <mt-button class="sure" style="display:block;position: absolute;
    right: 0px;" @click="handleConfirm2">确认</mt-button>
      </mt-picker>
    </mt-popup>
  </div>
</template>
<script>
import { formatDateMin } from '~/assets/formadata.js'
import picker2 from '~/components/picker2.vue'
import wx from 'weixin-js-sdk'
import vueJsonp from 'vue-jsonp'
export default {
  components: {
    picker2
  },
  layout: 'default2',
  data () {
    return {
      showamap: false,
      popupVisible22: false,
      adrword: '',
      isRouterAlive: false,
      popupVisible: false,
      equilist: [],
      userName: '',
      city: '',
      dataList: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'right'
        }
      ],
      htitle: '添加维护记录',
      ts: this.newStore(),
      grantime: '请选择出车时间',
      mapdata: {},
      lat: '',
      lng: '',
      carid: '',
      chouseval: '请选择设备',
      chousname: [],
      chouseid: '',
      dateval: {},
      wxinfo: {},
      cityname: '',
      addressdetail: '',
      content: ''
    }
  },
  mounted () {
    console.log(this.$jsonp, '000000')
    this.chouseval = '请选择设备'
    this.grantime = this.formatDate(new Date())
    //console.log(dateval, 'woshi')

    //this.grantime = formatDateMin(dateval)
  },
  methods: {
    handleConfirm2 () {
      document
        .getElementsByTagName('body')[0]
        .removeEventListener('touchmove', this.handler, { passive: false })
      //this.chouseval = this.$refs.picker.getValues()[0]
      this.popupVisible22 = false
    },
    onDateChange (picker, values) {
      //   console.log(picker, 123456)
      console.log(values, 123)
      if (values[0] == undefined) {
        this.chouseval = '请选择设备'
      } else {
        this.chouseval = values[0].showid
      }
      console.log(picker, 'values')

      for (let k = 0; k < this.chousname.length; k++) {
        if (this.chouseval == this.chousname[k].ep_ename) {
          console.log(this.chousname, 'this.chous')
          this.chouseid = this.chousname[k].id
        }
      }
      console.log(this.chouseid, 'this.chouseid')
    },
    addcarid () {
      const req = {
        handle: 'DD5D108B99FC12B72DC0B97F927BBE3D1A8639331D9DCC49',
        start: 0,
        limit: 1000000,
        fzrid: localStorage.getItem('pid')
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        console.log(ts.d.data.operation1, 'ts.d.data.operation1')
        let a = []
        let b = {}
        let c = []
        for (let i = 0; i < ts.d.data.operation1.length; i++) {
          b = {}
          b.showid = ts.d.data.operation1[i].hash.ep_ename
          b.showname =
            ts.d.data.operation1[i].hash.ep_ename +
            '---' +
            ts.d.data.operation1[i].hash.managenum
          a.push(b)
          c.push(ts.d.data.operation1[i].hash)
        }
        this.dataList[0].values = a
        this.chousname = c
        console.log(this.chousname, 'wwwww')
      })
      this.popupVisible22 = true
    },
    addtime () {
      this.$refs.picker.open()
    },
    handleConfirm (data) {
      //console.log(data)
      this.grantime = this.formatDate(data)
    },
    formatDate (date) {
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    },
    getmapdata (data, city) {
      console.log(data, '00000')
      this.mapdata = data
      let lng = data.location.split(',')
      this.lat = lng[1]
      this.lng = lng[0]
      this.city = city
      //console.log(this.mapdata)
      this.adrword = data.name
      this.showamap = false
    },
    options () {
      this.$router.go(-1)
    },
    reload () {
      console.log('地图组件重新加载')

      this.isRouterAlive = false
      this.$nextTick(() => (this.isRouterAlive = true))
    },
    chooseadr () {
      this.reload()
      this.$nextTick(() => {
        this.showamap = true
      })
    },
    changeshow (data) {
      this.showamap1 = data
    },
    gonuxt () {
      if (this.chouseid == '请输入设备' || this.chouseid == undefined) {
        this.$messagebox('提示', '请输入设备')
        return
      }
      if (this.grantime == '请选择出车时间' || this.grantime == undefined) {
        this.$messagebox('提示', '请选择出车时间')
        return
      }
      if (this.adrword == '请选择维护内容' || this.adrword == undefined) {
        this.$messagebox('提示', '请选择维护内容')
        return
      }
      this.$messagebox.confirm('是否确认添加').then(action => {
        const req = {
          handle:
            'DD5D108B99FC12B735E83B084D0B700869B8AC1FA85E149E537D3B99FCD389939C3881832543BE13',
          pid: localStorage.getItem('pid'),
          eid: this.chouseid,
          repair_time: this.grantime,
          repair_content: this.adrword
        }
        this.spost(this.ts, '/mainservlet', req).then(ts => {
          console.log(req, 'req')
          if (ts.d.sflag == 'success') {
            this.$messagebox('提示', '添加成功').then(action => {
              this.$router.push({
                name: 'carintermed',
                qery: {
                  name: '维护记录'
                }
              })
            })
            console.log(ts.d.data.operation1)
          }
        })
      })
    }
  }
}
</script>
<style scoped>
.mint-cell-value .mint-field-core {
  text-align: right !important;
}
input .mint-field-core {
  text-align: right;
}
.picker-item {
  text-align: center !important;
}
.info-title {
  padding: 10px;
  color: #ccc;
  font-size: 16px;
}
html {
  background: #f3f3f3;
}
.equi-div {
  font-size: 12px;
  line-height: 20px;
  color: #969191;
}
.equi-shebei {
  display: inline-block;
  padding: 1px 10px;
  color: #fff !important;
  background: rgb(51, 51, 51);
}
.h3_equi {
  font-size: 16px;
  font-weight: 400;
  line-height: 40px;
}
.equi-span2 {
  width: calc(calc(100% / 2) - 10px);
}
.equi-div1 {
  font-size: 16px;
  line-height: 25px;
  /* margin: 0 10px; */
  /* border-bottom: 1px solid #ddd; */
  padding-bottom: 10px;
}
.equi-span {
  color: #35495e;
}
.equi-xq {
  line-height: 90px;
  /* padding-left: 20px; */
  color: #26a2ff;
  float: right;
  /* background: #ddd; */
  margin-top: 5px;
  width: 20%;
  text-align: center;
  border-left: 1px solid #ddd;
}
.equi-left {
  width: 100%;
  /* float: left; */
  padding-right: 0px;
  /* margin: 0 auto; */
  padding: 10px;
  background: #fff;
}
.mapcontent {
  width: 100%;
  height: 100%;
}
.mint-search {
  height: 7vh;
}
.mint-searchbar {
  background: #f3f3f3 !important;
}
</style>
